<template>
	<view class="login-content">
		<view class="login">
			<!-- 			<p style="text-align: center;">欢迎使用</p> -->
			<view class="hint_text">
				系统检测到你还未进行登录<br />
				请先点击下方按钮授权登录
			</view>
			<p>
				<image style="border-radius: 50rpx;" class='img' src="../../static/logo.png" />
			</p>
			<p style="padding-left: 40upx;">为您提供优质服务,我们需要获取您的手机号：</p>
			<!-- <u--input placeholder="请输入手机号" border="surround" v-model="tel"></u--input> -->

			<button class="button" open-type="getPhoneNumber" v-if="agreementShow"   @getphonenumber="getPhoneNumber">手机号快捷登录</button>
			<view class="login-button" v-else @click="agreementShowShow">
				手机号快捷登录
			</view>
			<!-- 			<view class='info'>
				<span>仅供内部教师和家长使用</span>
			</view> -->
			<view class="agreement" style="display: flex;align-items: center;">
				<u-checkbox-group placement="column" v-model="agreement">
					<u-checkbox activeColor="#35C3DC" v-for="(item, index) in checkboxList" :key="index"
						:label="item.name" :name="item.name">
					</u-checkbox>	
				</u-checkbox-group>
				<text style="padding: 0 10rpx;white-space: nowrap;" @click="checkboxChange">用户协议</text>
			</view>
		</view>
		



		<u-popup :show="setPhoneShow" mode="bottom" round="14" zIndex="10070">
			<view class="phone">
				<view class="title1">
					欢迎使用 玩聚联盟
				</view>
				<view class="" style="font-size: 26upx;color: #ccc;margin-top: 10upx;">
					请填写必要信息，在参加活动的活动中显示和说明
				</view>
				<form @submit="formSubmit">
					<view class="form_item">
						<view class="form_item_lable">
							头像
						</view>
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="avatarUrl||'../../static/head.png'"></image>
						</button>
					</view>
					<view class="form_item">
						<view class="form_item_lable">
							昵称
						</view>
						<input type="nickname" class="weui-input" name="name" placeholder="请输入昵称" />
					</view>
					<button class="button" form-type="submit">确定</button>
				</form>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				setPhoneShow: false,
				tel: '',
				fullPath: '',
				avatarUrl: '',
				pic: '',
				checkboxList: [{
					name: '请先勾选并同意',
					disabled: false
				}],
				agreement: [],
				agreementShow:0

			}
		},
		watch:{
			agreement(){
				this.agreementShow=this.agreement.length
			}
		},
		onLoad(e) {
			this.fullPath = e.fullPath


		},
		onShow() {

			uni.removeStorageSync('token');
			let that = this
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.code = loginRes.code
				}
			})
		},
		methods: {
			checkboxChange(n) {
				uni.navigateTo({
					url: './agreement'
				})

			},
agreementShowShow(){
	uni.showToast({
		title: '请阅读并勾选页面底部协议',
		icon:'none'
	});
},
			onChooseAvatar(e) {
				this.$uploadFiles({
					filePath: e.detail.avatarUrl
				}).then(res => {
					this.pic = res.data
				})
				this.avatarUrl = e.detail.avatarUrl
			},

			formSubmit(e) {
				let that = this
				console.log(e.detail.value)
				if (!(e.detail.value.name && this.avatarUrl)) return uni.showToast({
					title: '为了您的体验，请填写头像昵称！',
					icon: 'none'
				});
				if (!this.agreement.length) return uni.showToast({
					title: '请先阅读并勾选用户协议',
					icon: 'none'
				});
				
				
				let code=false
				for (let i = 0; i < e.detail.value.name.length; i++) {
					let item=e.detail.value.name[i]
					if(!(uni.$u.test.chinese(item)||uni.$u.test.enOrNum(item))) {
						code=true
						i=e.detail.value.name.length
					} 
				}
				
				if(code) return uni.showToast({
					title: '昵称禁止使用特殊字符！',
					icon:'none'
				})
				

				let data = {
					code: this.code,
					pic: this.pic,
					name: e.detail.value.name,
					tel: this.tel
				}
				// return console.log('用户', data)
				this.$myRuquest('home/login/user_login', data).then(res => {
		

					uni.setStorageSync('token', res.data.token);
					this.$myRuquest('home/user/user').then(res => {
						console.log(res)
						uni.setStorageSync('userData', res.data);
						uni.navigateBack({
							delta: 1
						})
					})
				}).catch(err=>{
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								that.code = loginRes.code
							}
						})
					})


			},
			getPhone(code, encryptedData, iv) {

				this.$myRuquest('home/login/decodephone', {
					code,
					encryptedData,
					iv
				}).then(res => {
					this.tel = res.data
					let that = this
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							console.log('----', loginRes)
							that.code = loginRes.code
						}
					})
					this.setPhoneShow = true
				})
			},
			getPhoneNumber(e) {

				console.log("errMsg", e)
				var that = this

				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					console.log('用户拒绝提供手机号');
				} else {
					console.log('用户同意提供手机号');
					console.log("iv", e.detail.iv)
					console.log("encryptedData", e.detail.encryptedData)

					uni.checkSession({
						success: (res) => {
							console.log("checkSession--success---res", res)
							if (res.errMsg == 'checkSession:ok') {
								console.log('登录暂未过期');
								if (e.detail.encryptedData !== undefined && e.detail.iv !== undefined) {
									that.getPhone(that.code, e.detail.encryptedData, e.detail.iv)
								}
							}
						},
						fail: (res) => {
							console.log("checkSession---fail---res", res)
							console.log('登录已过期');
							//再执行一次login
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log("loginRes.code", loginRes.code);
									that.loginResCode = loginRes.code
									if (encryptedData !== undefined && iv !== undefined) {
										that.getPhone(that.loginResCode, encryptedData, iv)
									}
								}
							});
						}
					})
				}
				//e.detail.errMsg == 'getPhoneNumber:fail Error: 用户未绑定手机，请先在微信客户端进行绑定后重试'  微信会自动引导用户去绑定手机
			},
			basic() {
				this.$myRuquest('home/user/user').then(res => {
					if (res.code == 400) {
						this.data = res.data
						uni.setStorageSync('myData', res.data);
					}
				})
				this.$myRuquest('home/index/seo_config').then(res => {
					if (res.code == 400) {
						uni.setStorageSync('basic', res.data);
					}
				})
			}
		}
	}
</script>



<style lang='scss'>
	.form_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1upx solid #ccc;
		padding: 40upx 0;
		text-align: right;

		.form_item_lable {
			font-size: 28upx;
		}
	}
	
	.login-button{
		    width: 100%;
		    height: 100rpx;
		    line-height: 100rpx;
		    letter-spacing: 3rpx;
		    margin-top: 40rpx;
		    border-radius: 50rpx;
		    background: linear-gradient(to right, #35C3DC, #76D8E9);
		    color: white;
		    font-size: 35rpx;
				filter: grayscale(70%);
				text-align: center;
	}

	.hint_text {
		font-size: 30upx;
		text-align: center;
		margin-top: 20upx;
	}

	.login-content {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;

		.login {
			box-sizing: border-box;
			padding-top: 160rpx;
			width: 95%;
			margin-left: 2.5%;
			height: 100%;

			p: {
				position: relative;
			}

			p:first-of-type {
				font-size: 50rpx;
			}

			p:nth-of-type(1) {
				margin-top: 20rpx;
				font-size: 33rpx;
				color: #999999
			}

			p:nth-of-type(2) {
				width: 100%;
				margin-top: 40rpx;
				display: flex;
				justify-content: center;

				.img {
					width: 300rpx;
					height: 300rpx;
				}
			}

			p:nth-of-type(3) {
				margin-top: 40rpx;
				font-size: 30rpx;
			}

			p:nth-of-type(4) {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999999
			}


		}
	}

	.button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		letter-spacing: 3rpx;
		/* 		position: relative;
		top: 100rpx; */
		margin-top: 40upx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #35C3DC, #76D8E9);
		color: white;
		font-size: 35rpx;

		/* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
	}

	.avatar-wrapper {
		flex: 1;
		display: flex;
		flex-direction: row-reverse;

		background-color: rgba(0, 0, 0, 0);
	}

	button::after {
		border: none;
	}

	.phone {
		padding: 20upx;
		width: 660upx;
		padding-bottom: 40upx;
		/* height: 560upx; */
		margin: 0 auto;

		.title1 {
			font-size: 34upx;
			color: #333333;
		}

		.title2 {
			margin-top: 20upx;
			font-size: 32upx;
			color: #999999;
		}

		image {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			display: block;
		}
	}

	.agreement {
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
